<template>
  <el-dialog :model-value="showImageChooseDialog" @close="closeDialog" :close-on-click-modal="false">
    <template #header>
      <span class="title">图片选择</span>
    </template>
    <div class="line"></div>
    <image-table-data :single="singleType" @select-img="handleSelectImg" :operation="operationType"></image-table-data>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog" style="margin-right: 10px" :disabled="confirmLoading">关闭</el-button>
        <el-button type="primary" @click="handleConfirm" :loading="confirmLoading"
          :disabled="confirmLoading">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ImageTableData from '@/views/decoration/components/ImageTableData.vue'
const props = defineProps({
  showImageChooseDialog: {
    type: Boolean
  },
  singleType: {
    type: Boolean,
    default: false
  },
  operationType: {
    type: Boolean,
    default: true
  }
})

const imgData = ref([])
const confirmLoading = ref(false)

const emit = defineEmits(['closeDialog'])

function handleSelectImg(value: any) {
  imgData.value = value
}

async function handleConfirm() {
  if (confirmLoading.value) return
  confirmLoading.value = true
  try {
    emit('closeDialog', imgData.value)
  } finally { }
}

function closeDialog() {
  emit('closeDialog', false)
}
</script>

<style scoped lang="scss">
.title {
  font-weight: bold;
  color: #333;
}

.line {
  height: 1px;
  width: 100%;
  background-color: #f0f0f0;
  margin-bottom: 20px;
  margin-top: -30px;
}
</style>
